<script setup>
import {ref} from "vue";
import BaseDrawer from "@/components/drawer/BaseDrawer.vue";
import QueryDrawer from "@/components/drawer/QueryDrawer.vue";
import List from "./List.vue";
import Form from "./Form.vue";
import Query from "./Query.vue";

const saveOrUpdateVisible = ref(false)
const queryVisible = ref(false)

const handleDrawerSubmit = () => {
  saveOrUpdateVisible.value = false
  console.log("提交抽屉数据")
}

const openSaveOrUpdateDrawer = () => {
  saveOrUpdateVisible.value = true
  console.log("打开抽屉")
}

const handleExport = () => {
  console.log("导出功能")
}

const handleQuery = () => {
  queryVisible.value = false;
  console.log("执行高级查询")
}

const openQueryDrawer = () => {
  queryVisible.value = true;
  console.log("打开高级查询")
}
</script>

<template>
  <el-button-group>
    <el-button @click="openQueryDrawer">高级查询</el-button>
    <el-button @click="openSaveOrUpdateDrawer">新增</el-button>
    <el-button @click="handleExport">导出</el-button>
  </el-button-group>
  <List></List>
  <BaseDrawer
    v-model:visible="saveOrUpdateVisible"
    title="新增编号规则组成配置表"
    @submit="handleDrawerSubmit"
  >
    <template #saveOrUpdate>
      <Form suxch="苏希辰"></Form>
    </template>
  </BaseDrawer>
  <QueryDrawer
    v-model:visible="queryVisible"
    @query="handleQuery"
  >
    <template #queryParam>
      <Query></Query>
    </template>
  </QueryDrawer></template>

<style scoped lang="scss">
.el-button-group {
  position: absolute;
  top: 80px;
  right: 28px;
}
</style>